<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta name="keywords" content="topic"label_flow charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
    <%--(1)关于layui流加载器样式，用于指定宽高产生滚动条效果--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/forLayuiFlow.css">
    <script src="${pageContext.request.contextPath}/resources/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>贴吧，遵从自己的内心，喜欢就用，爱就拿走</legend>
</fieldset>
<div class="layui-bg-gray" style="padding: 20px;">

    <%--2.顶部搜索栏--%>
    <div class="layui-row layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">每时每刻，玩贴吧</div>
            <div class="layui-card-body">
                <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label layui-bg-green">标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" class="layui-input" placeholder="请输入帖子标题"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <%--[注意：提交按钮加上type属性]--%>
                            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="search_btn">
                                <i class="layui-icon layui-icon-search"> 查询</i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space20">
        <%--3.具体某个贴子及评论展示区域--%>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header" id="title1"></div>
                <div class="layui-card-body">
                    <span id="tpContent" style="color: #b2b2b2"></span>
                    <div id="trInfo" style="margin-top: 10px" style="color: #b2b2b2">
                        <hr/>
                        <span style="font-size: xxx-large; color: #01AAED">[评论区：]</span>
                        <%--[评论区：使用layui流加载组件]--%>
                        <ul class="flow-default1" id="LAY_demo2"></ul>
                    </div>
                </div>
            </div>
        </div>
        <%--4.所有贴子简略信息列表(依旧用“流加载组件”)  --%>
        <div class="layui-col-md8">
            <label class="layui-form-label layui-bg-cyan" id="label_flow"> 你要的帖子 </label><hr/>
            <ul class="flow-default" id="LAY_demo1"></ul>
        </div>
    </div>
</div>

<script>

    // 使用说明：html部分不用修改；
    //         script部分，改 【######### xxxxxxxx #########】注释的地方
    // 注意：1、贴子+评论的数据时一对多，所以取数据时 rs.data.list[0]表示贴子[仅一个]
    //                                     rs.data.list[0].rreply此贴的评论列表[多个]
    //      2、doit()函数用于贴子流数据加载，两个地方会用到：(1)初仅页面自动异步$.get()从后台获取贴子[url+“/”+页码]
    //                                               (2)查询时[url+"/"+页码+"/"+要查询的标题]
    //                  后台controller用两个处理方法接收：(1)"list/{page}"
    //                                                (2)"list/{page}/{title}"


    var trpleyInfo; /*变量作用域提升*/
    layui.use(['layer','form','flow','jquery'], function(){
        let layer = layui.layer;
        let form = layui.form;
        let flow = layui.flow;
        let $ = layui.jquery;

        /*清空评论区【用于在展示某个贴子前】*/
        function clearTR(){
            $("#title1").html("");
            $("#tpContent").html("");
            $("#LAY_demo2").html("");
        }

        /*5.flow组件动态展示贴子+评论*/
        trpleyInfo = function(tid){
            clearTR();
            flow.load({
                elem:'#LAY_demo2'
                ,scrollElem: '#LAY_demo2' //滚动条所在元素，一般不用填，此处只是演示需要。
                ,done: function(page, next){ //执行下一页的回调
                    $.get("${pageContext.request.contextPath}/tt/Pegar/"+tid+"/"+page,function(rs){ //【*** 注：rs由后台返回，格式见下面带星注释】***
                        if(page >= rs.data.pages && rs.data.list.length == 0){ //【*** 判断是否超过页数，是否有数据 ***】
                            layer.msg("暂无评论");
                            return false;
                        }
                        $("#title1").html("贴名："+rs.data.list[0].title);  // 【######### 你的贴名（根据后台变量名） #########】
                        $("#tpContent").html("帖子内容："+rs.data.list[0].content); // 【######### 你的贴内容（根据后台变量名） #########】
                        var lis = [];
                        layui.each(rs.data.list[0].rreply, function (index, item) { // ****通过layui.each遍历数据
                            lis.push(
                                '<li style="margin-top: 5px">'+
                                '<div class="layui-card">'+
                                '<div class="layui-card-header">'+
                                '<div class="layui-anim layui-anim-scaleSpring">'+
                                '<div class="layui-card-body">'+    // 【######### 评论数据（根据后台变量名） #########】
                                item.content+
                                '   ----'+item.author+'['+item.createdate+']'+
                                '</div>'+
                                '</div>'+
                                '</div></div></li>'
                            )
                        });
                        next(lis.join(''), page < 10); //假设总页数为 10
                    });
                }
            })
        }

        //进页面渲染贴子列表数据
        doit("");

        // 贴子列表流加载数据
        function doit(ttp){
            $("#LAY_demo1").html(""); //首先清空流区域
            flow.load({
                elem:'#LAY_demo1'
                ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
                ,done: function(page, next){ //执行下一页的回调
                    $.get("${pageContext.request.contextPath}/tt/list/"+page+ttp,function(rs){  // 【######### 发送请求（后台controller层处理） #########】
                        var lis = [];
                        layui.each(rs.data.list, function (index, item) {
                            lis.push(
                                '<li style="margin-top: 5px">'+
                                '<div class="layui-card layui-bg-gray">'+
                                '<div class="layui-card-header">'+
                                '<div class="layui-anim layui-anim-scaleSpring">'+  // 【######### topicid-贴子ID;  title-贴子标题 #########】
                                '<a href="javascript:void(0)" onclick=trpleyInfo(&apos;'+item.topicid+'&apos;)>'+item.title+'</a>'+
                                '</div>'+                                          // 【######### content-贴子内容简略;  #########】
                                '</div><div class="layui-card-body" style="color:#01AAED">'+item.content.substring(0,20)+'....'+
                                '</div></div></li>'
                            )
                        });
                        next(lis.join(''), page < 10); //假设总页数为 10
                    });
                }
            })
        }

        // 查询按钮绑定点击事件
        form.on("submit(search_btn)",function(data){
            let title = data.field.title;
            let tpt;
            if(title == undefined || title == ""){
                tpt = "";
            }else{
                tpt = "/"+title;
            }
            doit(tpt);  // 调用贴子列表渲染函数
        })
    });
</script>
</body>
</html>
